<template>
  <view class="page">
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">{{i18n['申请售后']}}</block>
    </fu-custom>
    <view class="goods-wrap bg-white margin-bottom-sm">
      <view class="flex padding-tb-sm">
        <view class="img-200 overHidden"><fu-image :src="refundInfo.goods_thumb" mode="aspectFill"></fu-image></view>
        <view class="goods-info margin-left-sm">
          <view>
            <view class="text-df text-333 text-cut-2 text-weight-500">{{ refundInfo.goods_name || '' }}</view>
            <view class="text-sm text-999 text-weight-400 margin-t-8">
              {{ refundInfo.sku_name || '' }}
            </view>
          </view>
          <view class="flex justify-between">
            <text class="text-df fu-cred" v-if="(refundInfo.is_pure_integral == 0 || refundInfo.is_pure_integral == 1) && order_type == 12">
              <text>{{ refundInfo.sales_integral }}{{ i18n['积分'] }}</text>
              <text v-if="refundInfo.is_pure_integral == 0" style="padding: 0 10rpx">+</text>
              <text v-if="refundInfo.is_pure_integral == 0">¥{{ refundInfo.shop_price || '' }}</text>
            </text>
            <text class="text-df text-prices" v-else>¥{{ refundInfo.shop_price || '' }}</text>
            <text class="text-df" >x{{ refundInfo.num }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="cu-form-group">
      <view class="title">{{ i18n['售后选择'] }}</view>
      <picker @change="statsChange" :value="statindex" :range="staicon">
        <view class="picker">{{ staicon[statindex] }}</view>
      </picker>
    </view>
    <view class="cu-form-group">
      <view class="title">{{ staicon[statindex] }}{{ i18n['原因'] }}</view>
      <picker @change="reasonChange" :value="select_reason" :range="reasons">
        <view class="picker">{{ reasons[select_reason] }}</view>
      </picker>
    </view> -->
    <view class="after-item-wrap bg-white">
      <view class="after-item flex justify-between align-center" @click="toggleTab('selector')">
        <view class="after_left text-111 text-lg text-weight-400">
          {{ i18n['售后选择'] }}
        </view>
        <view class="after_right text-bf text-weight-400 text-lg">
          <text class="margin-right-sm">{{ staicon[statindex].name }}</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>
      <view class="after-item flex justify-between align-center" @click="toggleTab('reason')">
        <view class="after_left text-111 text-lg text-weight-400">
          {{ staicon[statindex].name }}{{ i18n['原因'] }}
        </view>
        <view class="after_right text-bf text-weight-400 text-lg">
          <text class="margin-right-sm" v-if="refundInfo.refund_reason && refundInfo.refund_reason[select_reason].reason">{{ refundInfo.refund_reason[select_reason].reason }}</text>
          <text class="cuIcon-right"></text>
        </view>
      </view>
      <view class="after-item money flex justify-between align-center solid-bottom">
        <view class="after_left text-111 text-lg text-weight-400">
          {{ i18n['退款金额'] }}:
        </view>
        <view class="after_right text-prices text-weight-500 text-lg">
          <text class="text-price">{{refundInfo.refund_money}}</text>
        </view>
        <view class="tips text-999 text-sm text-weight-400">{{ i18n['含发货运费'] }}{{express_price}}{{ i18n['元，不可修改'] }}</view>
      </view>

    </view>
    <view class="bg-white padding-lr-sm padding-bottom-sm">
      <view class="title text-lg text-111 text-weight-400">{{ i18n['退款说明'] }}</view>
      <view class="wen text-111">
        <textarea  maxlength="200" class="text-df" value="" v-model="refund_content" :placeholder="i18n['请在此描述申请售后服务的原因']" placeholder-style="color:#bfbfbf" />
        <text class="tips text-sm text-weight-400 text-bf">{{refund_content.length}}/200</text>
      </view>
    </view>
    <view class="padding-b-60">
      <fu-upload col="4" max="3" @change="handleImageUpload" :defData="images"></fu-upload>
    </view>

    <view class="ben-btn submit-btn" @click.stop="handleSubmit">{{ i18n['提交'] }}</view>
    <fu-notwork></fu-notwork>
    <view class="sex-wrap">
      <w-picker :visible.sync="visible" mode="selector" :value="staicon[statindex].name" default-type="name" themeColor="#FF6464" :default-props="defaultProps" :options="staicon" @confirm="onConfirm($event,'selector')" ref="selector" >{{i18n['售后类型']}}</w-picker>
    </view>
    <w-picker v-if="refundInfo.refund_reason && refundInfo.refund_reason.length > 0" :visible.sync="visible" mode="selector" :value="refundInfo.refund_reason[select_reason].reason" default-type="reason" themeColor="#FF6464" :default-props="defaultProps1" :options="refundInfo.refund_reason" @confirm="onConfirm($event,'reason')" ref="reason" >{{ staicon[statindex].name }}{{ i18n['原因'] }}</w-picker>
  </view>
</template>

<script>
import { UploadImage } from '@/common/utils/index';
import { UPLOAD_IMAGE_URL } from '@/common/config.js';
import FuUpload from '../../components/fu-upload/fu-upload.vue';
// @see 引入组件wPicker
import wPicker from "../../components/w-picker/w-picker.vue";
export default {
  components: { FuUpload ,wPicker},
  data() {
    return {
      sku_id: '', // 商品规格
			imgWechatUrl:this.imgWechatUrl,
      order_sn: null, // 订单编号
			num: 0, // 商品数量
      images: [],
      states: [{name:global.i18n['已收到货'],id:1}, {name:global.i18n['未收到货'],id:2}], // 货物状态
      staicon: [{name:global.i18n['退款(无需退货)'],id:1}], // 退款原因
			statindex: 0,
      defaultProps: {"label":"name","value":"id"},
      defaultProps1: {"label":"reason","value":"id"},
      refundInfo: '',
      select_reason: 0,
      images: [],
      refund_content: '', // 退款说明
      visible:false,
      express_price:0,
			isLoading: false, // 防连点
    };
  },
  onLoad(options) {
    this.setNavigationBarTitle(this.i18n['申请售后']);
		const { order_sn, goods_id, sku_id, num, status } = options;
    this.sku_id = sku_id;
    this.order_sn = order_sn;
    this.goods_id = goods_id;
    this.num = num;
    switch (status) {
      case '2':
      case '3':
      case '4':
        this.staicon = [{name:this.i18n['退款(无需退货)'],id:1}, {name:this.i18n['退货退款'],id:2}];
        break;
    }
    this.getData();
  },
  methods: {
    /**
     * @event
     * @description 所在地的选择弹窗显示
     */
    toggleTab(ref) {
      this.$refs[ref].show();
    },
    /**
     * @event
     * @description 所在地选择事件
     * @param {Object} result - 用户所在地弹窗选择的值
     */
    onConfirm(result,type) {
      console.log(result,type);

       if(type == 'selector'){
         let index = this.staicon.findIndex(item => item.id == result.obj.id);
         this.statindex = index;
       }
       if(type == 'reason'){
         let index = this.refundInfo.refund_reason.findIndex(item => item.id == result.obj.id);
         this.select_reason = index;
       }

    },
    //获取售后信息
    getData() {
      let data = {
        order_sn: this.order_sn,
        goods_id: this.goods_id,
				sku_id: this.sku_id,
				num: this.num
      };
      this.$api.post(global.apiUrls.postGetRefundMoney, data).then(res => {
        console.log('退款商品信息', res);
        if (res.data.code == 1) {
          this.refundInfo = res.data.data;
        }
      });
    },
    handleImageUpload(e) {
      this.images = e;
    },
    // 提交
    handleSubmit() {
			if (this.isLoading) return;
      uni.hideKeyboard();
      if (!this.refund_content.trim()) return this.$message.info(this.i18n['请输入退款说明']);
      let arr = '';
      if (this.images.length != 0) {
        arr = this.images.join(',');
      }
      let data = {
        order_sn: this.order_sn,
        refund_type: Number(this.statindex) + 1,
        refund_reason: this.refundInfo.refund_reason[this.select_reason].reason,
        refund_content: this.refund_content,
        goods_id: this.goods_id,
        goods_money: this.refundInfo.goods_money,
        num: this.refundInfo.num,
        sku_id: this.sku_id,
				refund_money: this.refundInfo.refund_money
      };
      if (arr) {
        data.refund_picture = arr;
      }
			this.isLoading = true;
      this.$api.post(global.apiUrls.postGoodsAfterSale, data).then(res => {
          if (res.data.code == 1) {
            this.$message.info("售后申请已提交");
						// 通知列表页面更新数据
						uni.$emit('onPageUpdata', {
							type: 6, // 1: 取消订单， 2: 提醒发货， 3: 确认订单， 4: 删除订单，5: 评论， 6: 提交售后
						});
						// 通知详情页面更新数据
						uni.$emit('onOrederDetailPageUpdata');
            setTimeout(()=> {
							this.isLoading = false;
							uni.navigateBack();
            }, 800);
          } else {
						this.isLoading = false;
            this.$message.info(res.data.msg);
          }
        })
        .catch(err => {
					this.isLoading = false;
          console.log('err: ' + JSON.stringify(err));
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}
.goods-wrap {
  padding: 24rpx 24rpx 34rpx;
}
.margin-t-8{
  margin-top: 8rpx;
}
.padding-b-60{
  padding-bottom: 60rpx;
}
.text-111{
  color: #111111;
}
.text-bf{
  color: #bfbfbf;
}
.line-20{
  height: 20rpx;
  width: 100%;
  background: #F8F8F8;
}

.after-item-wrap{
  padding: 16rpx 24rpx 32rpx;
  .after-item{
    height: 78rpx;
    &.money{
      position: relative;
      height: 122rpx;
      padding-bottom: 44rpx;
      .tips{
        position: absolute;
        left: 0;
        bottom: 20rpx;
      }
    }

  }
}


.submit-btn {
  position: fixed;
  bottom: 0rpx;
  bottom: calc(0rpx + constant(safe-area-inset-bottom));
  bottom: calc(0rpx + env(safe-area-inset-bottom));
  left: 0rpx;
  width: 100%;
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background: $bgtheme;
  font-size: 32rpx;
  font-weight: 500;
}

.wen {
  width: 702rpx;
  height: 272rpx;
  // border: 1rpx solid #e8e8e8;
  margin-top: 20rpx;
  padding: 24rpx;
  font-size: 28rpx;
  font-weight: 400;
  background: #F8F8F8;;
  border-radius: 16rpx;
  position: relative;
  textarea{
    width: 100%;
    height: 100%;
  }
  .tips{
    position: absolute;
    right: 24rpx;
    bottom: 24rpx;
  }
}

.img-200 {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
}
.goods-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  overflow: hidden;
  & > view {
    width: 100%;
  }
}
/deep/ .sex-wrap .w-picker-view{
  height:228rpx;
}
/deep/ .w-picker-item{
  position: relative;
  // height: 108rpx!important;
  // line-height: 108rpx!important;
  &::before{
    content: '';
    width: 100%;
    height: 1px;
    background: #eee;
    transform: scaleY(0.5);
    position: absolute;
    top: 0;
    left: 0;
  }
  &::after{
    content: '';
    width: 100%;
    height: 1px;
    background: #eee;
    transform: scaleY(0.5);
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
